<template>
  <div class="chat">
    <div class="user">
      <div class="search">
        <input class="input" v-model="searchName" placeholder="搜素好友添加">
        <div @click="searchFriend" class="add_box">
          <img src="@/assets/img/add.png">
        </div>
      </div>
      <div class="user_list">
        <li class="new_friend" :class="isNew?'selected':''" @click="newFriend">
          <img src="@/assets/img/new_friend.png">
          <div class="info">
            <el-badge v-if="applyCount>0" :value="applyCount" class="item">
              <div class="name_msg">
                <span class="name">新的朋友</span>
              </div>
            </el-badge>
            <div v-else class="name_msg">
              <span class="name">新的朋友</span>
            </div>
          </div>
        </li>
        <li :class="user.value && item.id===user.value.id && !isNew?'selected':''" v-for="(item) in userList.value" @click="switchUser(item)">
          <div class="avatar_box">
            <img v-if="item.avatar===null || item.avatar===''" src="@/assets/img/avatar.jpg">
            <img v-else :src="item.avatar">
            <img v-if="item.online===1" class="online" src="@/assets/img/online.png">
            <img v-else class="online" src="@/assets/img/un_line.png">
          </div>
          <div class="info">
            <div class="name_msg">
              <span class="name">{{ item.remark?item.remark:item.name }}</span>
            </div>
          </div>
        </li>
      </div>
    </div>
    <div class="info_box" v-if="user.value  && !isNew">
        <div class="info" v-if="user.value  && !isNew">
          <img style="width: 50px" :src="user.value.avatar">
          <div class="user_info">
            <span class="user_info_name">{{ user.value.name }}</span>
            <span class="user_info_no">微信号:&nbsp;{{user.value.userName}}</span>
          </div>
        </div>
        <div class="content"  v-if="user.value && !isNew">
          <div class="info_name">
            <span>备注名</span>
            <span>添加来源</span>
          </div>
          <div class="info_value">
            <input @blur="editRemarkHandle(user)" v-model="remark" placeholder="点击编辑备注名"/>
            <span>用户名添加</span>
          </div>
        </div>
        <div class="btn_msg"  v-if="user.value && !isNew">
          <button class="send_msg_btn" @click="toSendMsg">发消息</button>
        </div>
    </div>
    <div class="info_box" v-if="!user.value && !isNew">
      <div v-if="!user.value && !isNew" class="logo">
        <img src="@/assets/img/logo.png">
      </div>
    </div>
    <div class="new_friend_list"  v-if="isNew">
        <div class="top">
          <span>新的朋友</span>
        </div>
      <div class="apply_list">
        <li v-for="item in applyList.value" :key="item.userId">
          <img :src="item.avatar" alt="">
          <div class="apply_msg">
            <span>{{ item.name }}</span>
            <span class="remark">{{ item.msg }}</span>
          </div>
          <div  class="apply_btn">
            <button v-if="item.state===0" @click="apply(item.id,1)">同意</button>
            <span v-if="item.state===0" style="cursor: pointer"  @click="apply(item.id,2)">忽略</span>
            <span v-if="item.state===1" class="success_span">已同意</span>
            <span v-if="item.state===2" class="fail_span">已忽略</span>
          </div>
        </li>
      </div>
    </div>
    <pop-up :visible="visible" :name="searchName" @close="closeSearchFriend"/>

  </div>
</template>

<script setup>
import {wsStore} from "@/store/ws.js";
import {onMounted, reactive, ref} from "vue";
import {editRemark, getApplyList, getUserList, getWaitHandleCount, handleApply} from "@/api/user/index.js";
import {useRouter} from "vue-router";
import {wxIcon} from "@/store/icon.js";
import play, {notice} from "@/util/playMsgNitific.js";
import PopUp from "@/components/popUp.vue";
import {ElNotification} from "element-plus";
import Notific from "@/components/notific.vue";
import {msgStore} from "@/store/msg.js";

let user = reactive({})
let visible = ref(false)
let remark = ref(null)

let userList = reactive([])
let searchName = ref('')
let isNew = ref(false)
let applyList = reactive([])
let store = msgStore()
let icon = wxIcon()
let applyCount = ref(0)

let router = useRouter();

//收到消息监听，带开发
store.$subscribe((mutation,state)=>{
  let msgObj = state.msg
  if (msgObj && msgObj.fromId){
    play()
    ElNotification({
      title:msgObj.from,
      icon:Notific,
      customClass:'success',
      duration: 3000,
      message: msgObj.message,
      offset: 100,
    })
  }
})


/**
 * 开启弹窗
 */
function searchFriend(){
  visible.value = true
}

/**
 * 关闭弹窗
 */
function closeSearchFriend(){
  visible.value = false
}

/**
 * 编辑备注
 */
function editRemarkHandle(user){
  remark.value = remark.value.trim()
  if (remark.value.length<=0){
    remark.value = null
  }
  editRemark({friendId:user.value.id,remark:remark.value}).then(res=>{
    notice('success',"编辑成功")
    getUsers()
  })
}

function apply(id,state){
  handleApply({id,state}).then(res=>{
    // 重新获取好友申请列表
    newFriend()
    notice("success","处理成功","操作通知")
  });
}

function toSendMsg(){
  router.push("/wx/chat?uid="+user.value.id+"&name="+user.value.name)
  icon.select_icon = 1
}
/**
 * 获取当前用户的好友列表
 */
function getUsers(){
  getUserList().then(res=>{
    userList.value = res.data.data
  })
  getWaitHandleCount().then(res=>{
    applyCount.value = res.data.data
  })
}


function switchUser(item){
  isNew.value = false
  remark.value = item.remark
  user.value = item;
}

function newFriend(){
//   获取好友申请列表
  isNew.value = true
  getApplyList().then(res=>{
    applyList.value = res.data.data
  })
}

onMounted(()=>{
  getUsers()
})
</script>

<style lang="less" scoped>

.chat {
  position: relative;
  display: flex;
  min-height: 600px;
  width: 100%;
  border-radius: 8px;
}


.user {
  flex: 6;
  background-color: #f7f7f7;
  border-right: 1px solid rgba(214, 214, 214, 0.8);
  display: flex;
  flex-direction: column;

  .search {
    display: flex;
    height: 55px;
    align-items: center;
    justify-content: space-around;

    .input {
      padding-left: 10px;
      height: 25px;
      background-color: #eaeaea;
      border-radius: 5px;
      border: 1px solid #eaeaea;
      outline: none;
      width: 70%;
    }

    .input:focus {
      border: 1px solid #eaeaea;
      background-color: #f8f8f8;
    }

    .add_box {
      width: 25px;
      height: 25px;
      background-color: #eaeaea;
      border-radius: 3px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .user_list {
    flex: 1;
    width: 100%;
    background-color: #e9e7e6;
    overflow-y: scroll;
    .avatar_box{
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      .online{
        width: 10px;
        height: 10px;
        position: absolute;
        right: 0px;
        bottom: 8px;
      }
    }
    .new_friend{
      margin: 5px 0;
      border-bottom: 1px solid #dddbda;
    }
    .selected{
      background-color: #c7c6c5;
    }
    li {
      cursor: default;
      display: flex;
      list-style: none;
      align-items: center;
      height: 60px;

      .info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 5px;
      }

      img {
        margin: 0 10px;
        height: 70%;
        border-radius: 6px;
      }

      .name_msg {
        width: 100%;
        text-align: start;

        .name {
          font-size: 15px;
        }

        .time {
          float: right;
          padding-right: 8px;
          font-size: 12px;
          color: #999;
        }
      }

      .time_box {
        display: flex;
      }

      .msg {
        color: #999999;
        font-size: 14px;
      }
    }

    li:hover {
      background-color: #d7d7d8;
    }
  }
}
.new_friend_list{
  .top{
    text-align: start;
    height: 55px;
    width: 100%;
    line-height: 55px;
    border-bottom: 1px solid #ececec;
    span{
      margin-left: 20px;
    }
    }
  .apply_list{
    width: 100%;
    height: 80%;
    overflow-y: scroll;
    li{
      position: relative;
      height: 70px;
      margin: 0 70px;
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border-bottom: 1px solid #dddbda;
      img{
        margin-right: 20px;
        height: 55px;
        width: 55px;
        border-radius: 5px;
      }
      .apply_msg{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .remark{
          color: #9e9e9e;
          font-size: 8px;
        }
      }
      .apply_btn{
        position: absolute;
        right: 20px;
        button{
          border: none;
          cursor: pointer;
          color: #07c160;
          border-radius: 5px;
          background-color: #e9e9e9;
          height: 30px;
          padding: 3px 30px;
          margin-right: 15px;
        }
        .success_span{
          color: #07c160;
        }
        .fail_span{
          color: #d76868;
        }
        span{
          font-size: 13px;
          color: #9e9e9e;
        }
      }
    }

  }
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  flex: 13;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  background-color: #f3f3f3;
}
.info_box {
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  flex: 13;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #f3f3f3;
  .info{

    display: flex;
    width: 50%;
    img{
      margin: 10px;
      border-radius: 5px;
    }
    .user_info{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-evenly;

      .user_info_no{
        font-size: 8px;
        color: #9e9e9e;
      }
    }
    border-bottom: 1px solid #dddbda;
  }
  .content{
    display: flex;
    width: 50%;
    padding: 10px 0;
    border-bottom: 1px solid #dddbda;
    .info_name{
      display: flex;
      color: #9e9e9e;
      font-size: 12px;
      flex-direction: column;
      align-items: flex-start;
      margin-right: 20px;
    }
    .info_value{
      display: flex;
      font-size: 12px;
      flex-direction: column;
      align-items: flex-start;
      padding: 1px;
      input{
        border: none;
        background-color: transparent;
        cursor: pointer;
        border-radius: 3px;
      }
      input:focus {
        border: 1px solid #07c160;
        outline: none;
      }
    }
  }
  .btn_msg{
    margin: 20px;
    .send_msg_btn{
      cursor: pointer;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      color: white;
      background-color: #07c160;
      padding: 5px 30px;
    }
    .send_msg_btn:focus {
      background-color: #38cd7f;
      outline: none;
    }

    .send_msg_btn:active {
      background-color: #c6c6c6;
    }
  }
  .logo{
    width: 100%;
  }
}


.msg_text {
  font-size: 14px;
}

.msg_left {
  word-break: break-all;
  position: relative;
  width: 75%;
  min-height: 20px;
  padding: 8px;
  text-align: start;
  margin-left: 15px;
  border-radius: 10px;
  background: #ebebeb;
  clear: both
}

.msg_left:before {
  position: absolute;
  top: 8px;
  left: -18px;
  padding: 0;
  border: 10px solid;
  border-color: transparent #ebebeb transparent transparent;
  display: block;
  content: '';
  z-index: 9;
}

.msg_right {
  position: relative;
  word-break: break-all;
  width: 75%;
  min-height: 20px;
  padding: 8px;
  float: right;
  text-align: start;
  margin-right: 15px;
  border-radius: 10px;
  background: #89d961;
  clear: both
}

.msg_right:before {
  position: absolute;
  top: 8px;
  right: -18px;
  padding: 0;
  border: 10px solid;
  border-color: transparent transparent transparent #89d961;
  display: block;
  content: '';
  z-index: 9;
}
</style>